<template>
	<view class="search_content">
		<view class="search">
			<view class="search_left">
				<image src="@/static/home/search.png"></image>
				<input v-model="keyword" type="text" placeholder="Search" />
			</view>
			<view class="search_right flex-center" @click.stop="handleSearch">Search</view>
		</view>
		<view class="content flex-layout-col" v-if="shopList.length>0">
			<p style="font-weight: bold;">Business List</p>
			<business-list v-for="item in shopList" :detail="item"></business-list>
			<u-loadmore v-if="hasMore" :status="loadStatus" />
		</view>
		<view class="empty" v-if="shopList.length<=0">
			<image src="../../static/list.png" mode=""></image>
			<p>No products available</p>
		</view>
	</view>
</template>

<script>
	// import keyboard from "../../uni_modules/uview-ui/libs/config/props/keyboard";
	import {
		getShop
	} from "@/lib/business.js";
	import {
		showFailure
	} from '../../lib/helper';
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				keyword: '',
				currentPage: 1,
				pageSize: 5,
				hasMore: false,
				shopList: [],
			}
		},
		onLoad(options) {
			this.keyword = options.keyword;
			this.loadData();

		},
		onReachBottom() {
			if (this.hasMore) {
				this.currentPage = this.currentPage + 1;
				this.loadData();
			}
		},
		methods: {
			loadData(isReset) {
				this.loadStatus = 'loading';
				let obj = {
					pageNo: this.currentPage,
					pageSize: this.pageSize,
				}
				if (this.keyword) {
					obj['keyword'] = this.keyword
				}
				getShop(obj).then((res) => {
						uni.hideLoading();
						this.loadStatus = 'no-more';
						this.hasMore = res.data.hasMore;
						if (isReset) {
							this.shopList = res.data.records;
						} else {
							this.shopList = this.shopList.concat(res.data.records);
						}
					})
					.catch((res) => {
						this.loadStatus = 'no-more';
						uni.hideLoading();
						showFailure();
					});

			},
			handleSearch() {
				this.currentPage = 1;
				this.loadData(true);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		text-align: center;
		margin-top: 10vh;
	
		image {
			width: 376rpx;
			height: 376rpx;
		}
	
		p {
			font-size: 28rpx;
			color: #999999;
		}
	}
	
	.search {
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
		margin: 30rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #ECECEB;

		.search_left {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 28rpx;
				margin-right: 22rpx;
			}
		}

		.search_right {
			width: 186rpx;
			height: 84rpx;
			background: #FC721A;
			border-radius: 50rpx;
			margin-right: 6rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>